<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="点名表管理">
        <!-- 用户当前的课表区域 -->
        <el-table :data="classTimeTable" border stripe>
          <el-table-column
            fixed="left"
            label="班级"
            prop="class_name"
          ></el-table-column>
          <el-table-column
            label="阶段"
            prop="course"
            width="200px"
          ></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              {{ getType(scope.row.act) }}
            </template>
          </el-table-column>
          <el-table-column
            label="课节日期"
            prop="class_date"
            width="120px"
          ></el-table-column>
          <el-table-column
            label="原课节"
            prop="class_section"
            width="70px"
          ></el-table-column>
          <el-table-column
            label="实际课节日期"
            prop="actual_date"
            width="120px"
          ></el-table-column>
          <el-table-column
            label="课节"
            prop="actual_section"
            width="50px"
          ></el-table-column>
          <el-table-column label="讲师" prop="lecturer"> </el-table-column>
          <el-table-column label="导员" prop="counsellor"> </el-table-column>
          <el-table-column label="点名状态" prop="state">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state == 0">未点名</el-tag>
              <el-tag v-else type="success">已点</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="点名时间" width="200px">
            <template slot-scope="scope">
              {{ scope.row.update_time | datetime }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-link
                @click="handleClickLink(scope.row.id)"
                type="primary"
                icon="el-icon-user"
                v-if="scope.row.state == 0"
                >点名</el-link
              >
              <el-link
                v-else
                @click="handleClickLink(scope.row.id)"
                type="warning"
                icon="el-icon-edit"
              >
                修改
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="调课/代课">
        <!-- 用户当前的班级区域 -->
        <el-table :data="coursePlanList" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column label="班级" prop="cls"></el-table-column>
          <el-table-column label="课程阶段" width="250px">
            <template slot-scope="scope">
              {{ scope.row.course.name }}({{ scope.row.course.stage }})
            </template>
          </el-table-column>
          <el-table-column label="教室号" prop="room_number"></el-table-column>
          <el-table-column label="讲师" prop="lecturer"> </el-table-column>
          <el-table-column label="导员" prop="counsellor"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link
                @click="AdjustCourse(scope.row)"
                type="warning"
                icon="el-icon-guide"
                >调课/代课</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 调课的对话框 -->
    <el-dialog
      title="调课/代课"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-form
        ref="editFormRef"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="原上课日期" prop="original_date">
          <el-select
            v-model="formData.original_date"
            placeholder="请选择原上课日期"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dateOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调整后日期" prop="change_date">
          <el-select
            v-model="formData.change_date"
            placeholder="请选择调整后日期"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in dateOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调整类型" prop="change_type">
          <el-radio-group v-model="formData.change_type" size="medium">
            <el-radio
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="formData.change_type"
          label="代课老师"
          prop="change_teacher"
        >
          <el-select
            v-model="formData.change_teacher"
            placeholder="请选择代课老师"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in teacherOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.original_date"
          :label="formData.original_date"
          prop="original_class"
        >
          <el-checkbox-group v-model="formData.original_class" size="medium">
            <el-checkbox
              v-for="(item, index) in classSectionOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          v-if="formData.change_date"
          :label="formData.change_date"
          prop="change_class"
        >
          <el-checkbox-group v-model="formData.change_class" size="medium">
            <el-checkbox
              v-for="(item, index) in changeClassSectionOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAdjustCourse()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserCoursePlan, adjustCourse } from '../../api/courseplan'
import { getTeachingCycle } from '../../api/teachingtime'
import { getTeacherByClassId } from '../../api/adminuser'
import { getClassTimeTable } from '../../api/rollcall'
import moment from 'moment'
export default {
  data() {
    return {
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      coursePlanList: [],
      classTimeTable: [],
      formData: {
        original_date: '',
        change_date: '',
        change_type: 0,
        change_teacher: '',
        original_class: [],
        change_class: [],
        course_plan_id: 0,
      },
      allClassSectionOptions: [
        {
          label: '第一节课',
          value: 1,
        },
        {
          label: '第二节课',
          value: 2,
        },
        {
          label: '第三节课',
          value: 3,
        },
        {
          label: '第四节课',
          value: 4,
        },
        {
          label: '第五节课',
          value: 5,
        },
        {
          label: '第六节课',
          value: 6,
        },
        {
          label: '第七节课',
          value: 7,
        },
        {
          label: '第八节课',
          value: 8,
        },
        {
          label: '第九节课',
          value: 9,
        },
        {
          label: '第十节课',
          value: 10,
        },
        {
          label: '第十一节课',
          value: 11,
        },
      ],
      rules: {
        original_date: [
          {
            required: true,
            message: '请选择原上课日期',
            trigger: 'change',
          },
        ],
        change_date: [
          {
            required: true,
            message: '请选择调整后日期',
            trigger: 'change',
          },
        ],
        change_type: [
          {
            required: true,
            message: '调整类型不能为空',
            trigger: 'change',
          },
        ],
        change_teacher: [
          {
            required: true,
            message: '请选择代课老师',
            trigger: 'change',
          },
        ],
      },
      dateOptions: [],
      typeOptions: [
        {
          label: '调课',
          value: 0,
        },
        {
          label: '代课',
          value: 1,
        },
      ],
      teacherOptions: [],
      classId: 0,
    }
  },
  created() {
    this.getUserCoursePlan()
    this.getClassTimeTable()
  },
  methods: {
    handleClickLink(id) {
      this.$router.push({
        name: 'roll-call',
        params: { id },
      })
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.queryInfo.pagenum = 1
      this.getClassTimeTable()
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getClassTimeTable()
    },
    getType(act) {
      if (!act) return ''
      return act.change_type ? '代课' : '调课'
    },
    // 获取点名表
    async getClassTimeTable() {
      const { data, count } = await getClassTimeTable(this.queryInfo)
      this.classTimeTable = data
      this.total = count
    },
    // 获取排课信息
    async getUserCoursePlan() {
      const result = await getUserCoursePlan()
      if (result) {
        this.coursePlanList = result
      }
    },
    // 显示调代课对话框
    async AdjustCourse(row) {
      this.classId = row.cls_id
      this.formData.course_plan_id = row.id
      this.editDialogVisible = true
      //获取本月教学周期的所有日期
      const tc = await getTeachingCycle('current')
      console.log(tc)
      if (tc.id) {
        let startDate = moment(tc.starttime)
        let endDate = moment(tc.endtime)
        const noClassDate = JSON.parse(tc.no_class_date)
        this.morningClassDate = JSON.parse(tc.morning_class_date)
        this.afternoonClassDate = JSON.parse(tc.afternoon_class_date)
        this.dateOptions = []
        if (endDate && startDate) {
          while (endDate >= startDate) {
            let date = startDate.format('YYYY-MM-DD')
            if (!noClassDate.includes(date)) {
              this.dateOptions.push(date)
            }
            startDate.add(1, 'day')
          }
        }
      }
    },
    // 调代课
    async doAdjustCourse() {
      this.$refs['editFormRef'].validate((valid) => {
        if (!valid) return
      })
      if (
        this.formData.change_class.length != this.formData.original_class.length
      ) {
        this.$message.warning('调整课节数与选中原课节数不对应 请检查后重试！')
        return
      }
      adjustCourse(this.formData).then((value) => {
        if (value.hasOwnProperty('errors')) {
          this.$message.warning(value.errors)
        } else {
          this.editDialogClosed()
          this.getClassSection()
          this.$message.success('调课成功')
        }
      })
    },
  },
  watch: {
    //监听原上课日期的变化
    'formData.original_date': function (value) {
      //获取班级的正课时间
      const [cp] = this.coursePlanList.filter((item) => {
        return item.cls_id == this.classId
      })
      var classTime = cp.class_time.split(',').map((item) => {
        return Number(item)
      })

      //设置显示的课节
      if (this.morningClassDate.includes(value)) {
        classTime = classTime.slice(0, 2)
      }
      if (this.afternoonClassDate.includes(value)) {
        classTime = classTime.slice(2)
      }
      this.classSectionOptions = this.allClassSectionOptions.filter((item) => {
        return classTime.includes(item.value)
      })
      this.formData.original_class = classTime
    },
    // 监听调整日期的变化
    'formData.change_date': function (value) {
      this.formData.change_class = []
      //设置显示的课节
      var showClassSection = this.allClassSectionOptions
      if (this.morningClassDate.includes(value)) {
        showClassSection = this.allClassSectionOptions.slice(0, 4)
      }
      if (this.afternoonClassDate.includes(value)) {
        showClassSection = this.allClassSectionOptions.slice(4, 8)
      }
      this.changeClassSectionOptions = showClassSection
    },
    //监听调代课的变化
    'formData.change_type': function (value) {
      if (value && this.teacherOptions.length == 0) {
        // 获取该学院的所有讲师 duty=2的为讲师
        getTeacherByClassId(this.classId).then((value) => {
          if (!value.length) return
          value.forEach((item) => {
            if (item.role__duty == 2) {
              this.teacherOptions.push({
                label: item.name,
                value: item.id,
              })
            }
          })
        })
      }
    },
  },
}
</script>

<style scoped>
</style>
